<%
//老年证领取
layout("/inc/layout.html",{
title:'老年证打印',
keywords:'老年证打印',
description:'老年证打印',
style:'user.css'
}){
%>
<link rel="stylesheet" type="text/css" href="/static/start/static/css/public.min.css">
<style>
.canvas{
    height: 321px; 
    transform: scale(.5,.5) translate(-50%,-50%);
    -ms-transform: scale(.5,.5) translate(-50%,-50%); /* IE 9 */
    -moz-transform: scale(.5,.5) translate(-50%,-50%); /* Firefox */
    -webkit-transform: scale(.5,.5) translate(-50%,-50%); /* Safari 和 Chrome */
    -o-transform: scale(.5,.5) translate(-50%,-50%); /* Opera */
}
</style>
<section class="container mt20">
    <ul class="breadcrumb">当前位置：
        <li><a href="/">主页</a></li>
        <li><a href="/personal/list/${idCardNo}">证明办理</a></li>
        <li>老年优待证</li>
    </ul>
</section>
<div class="container">
    <!--快捷键-->
    <div class="mt15 text-center">
        <div id="cartList" class="panel panel-default ">
            <div class="panel-heading">
                <h4>正在以&emsp14;<b class="text-danger">${name!}</b>&emsp14;身份信息办理打印老年优待证</h4>
            </div>
            <div class="panel-body">
                   <div class="col-xs-12 col-sm-6 col-md-6">
                      <div class="canvas">
                           <canvas id="frontCanvas" width="1016" height="642" >您的浏览器不支持Canvas</canvas>
                       </div>
						<div class="caption">
								<h4 class="text text-primary text-center">老年优待证正面</h4>
					   </div>	
					</div>
					<div class="col-xs-12 col-sm-6 col-md-6">
					    <div class="canvas">
                                <canvas id="backCanvas" width="1016" height="642">您的浏览器不支持Canvas</canvas>
                          </div>
                          <div class="caption">
								<h4 class="text text-primary text-center">老年优待证反面</h4>
							</div>
					</div>
            </div>
            <div class="panel-footer">
                <button  class="btn btn-lg btn-info mt5" id="printLaonianCard" data-idcard="${personal.idCardNo!}"><i class="iconfont icon-zhengjian"></i><b>打印老年证</b></button>
            </div>
        </div>

    </div>
</div>

<% } %>
<script src="/static/start/modules/main.js"></script>
<script src="/static/start/modules/IDCard.js"></script>
<script src="/static/start/modules/CardPrint.js"></script>
<script src="/static/start/modules/A4Print.js"></script>
<script src="/static/start/modules/app.js"></script>
<script type="text/javascript">
    // 默认排版

    var cardDataJson = {
       // "front_background": "${webUrl!}${frontCardImg!}",
        "back_background": "${webUrl!}${backCardImg!}",
        "text": [
            {
                "side": 0,
                "text": "姓    名：${name!}",
                "startX": 290,
                "startY": 155,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            },
            {
                "side": 0,
                "text": "出生年月：${birthday!}",
                "startX": 290,
                "startY": 218,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            },
            {
                "side": 0,
                "text": "家庭住址：${address1!}",
                "startX": 290,
                "startY": 281,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            },
            {
                "side": 0,
                "text": "${address2!}",
                "startX": 460,
                "startY": 344,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            },
            {
                "side": 0,
                "text": "发卡日期：${issuedTime!}",
                "startX": 290,
                "startY": 407,
                "font": 4,
                "size": 8,
                "color": "#000000",
                "style": 0
            },
            {
                "side": 0,
                "text": "${idCardNo!}",
                "startX": 187,
                "startY": 500,
                "font": 2,
                "size": 13,
                "color": "#000000",
                "style": 0
            }
        ],
        "image": [
            {
                "side": 0,
                "imgstr": "${avatar!}",
                "startX": 52,
                "startY": 164,
                "width": 226,
                "height": 280
            },
            {
                "side": 0,
                "imgstr": "${stamp!}",
                "startX": 750,
                "startY": 350,
                "width": 200,
                "height": 200
            },
            {
                "side": 1,
                "imgstr": "${QRcode!}",
                "startX": 750,
                "startY": 350,
                "width": 200,
                "height": 200
            }
        ]
    }; 
    
    
    viewCanvas(cardDataJson);
    
    // 创建canvas画布
    function viewCanvas(data) {
        // 正面
        var oFront = document.getElementById("frontCanvas");
        var front = oFront.getContext("2d");

        // 反面
        var oBack = document.getElementById("backCanvas");
        var back = oBack.getContext("2d");

        var imgIndex = 0;

        // 插入背景图片
         var front_background = new Image();
        front_background.src = getImageTyle("${webUrl!}/static/images/card/laonian_z_white.png");
        front_background.onload = function () {
            front.drawImage(front_background, 0, 0);
            imgIndex++;
            if(imgIndex == 2){
                TraverseImages();
                imgIndex = 0;
            }
        }
        front_background.onerror = function () {
            imgIndex++;
            if(imgIndex == 2){
                TraverseImages();
                imgIndex = 0;
            }
        }
 

        var back_background = new Image();
        back_background.src = getImageTyle(data.back_background);
        back_background.onload = function () {
            back.drawImage(back_background, 0, 0);
            imgIndex++;
            if(imgIndex == 2){
                TraverseImages();
                imgIndex = 0;
            }
        }
        back_background.onerror = function () {
            imgIndex++;
            if(imgIndex == 2){
                TraverseImages();
                imgIndex = 0;
            }
        }
        


        // 遍历图片
        function TraverseImages() {
            var imagesLength = 0;
            if(data.image){
                if(imagesLength == data.image.length){
                    TraverseText();
                }
                for (var i = 0; i < data.image.length; i++) {
                    (function (is) {
                        var oImg = new Image();
                        oImg.src = getImageTyle(data.image[is].imgstr);
                        oImg.onload = function () {
                            imagesLength++
                            if (data.image[is].side == 0) {
                                setImageSize(front,oImg,data,is);
                            } else if (data.image[is].side == 1) {
                                setImageSize(back,oImg,data,is);
                            }else{
                                Toast('errs', 'side参数传入有误');
                                return
                            }
                            if(imagesLength==data.image.length){
                                TraverseText();
                                imagesLength = 0;
                            }
                        }
                        oImg.onerror = function () {
                            imagesLength++
                            if(imagesLength==data.image.length){
                                TraverseText();
                                imagesLength = 0;
                            }
                        }
                    })(i);
                }
            }else{
                TraverseText();
            }
        }
        
        // 遍历文本
        function TraverseText(){
            for (var i = 0; i < data.text.length; i++) {
                (function (is) {

                    if (data.text[is].side == 0) {
                        var objCanvas = front;
                    } else if (data.text[is].side == 1) {
                        var objCanvas = back;
                    } else {
                        Toast('errs', 'side参数传入有误');
                        return
                    }

                    objCanvas.strokeStyle = "rgba(0,0,0,0)";
                    objCanvas.fillStyle = "rgba(0,0,0,0)";

                    // 设置字体
                    switch (data.text[is].font) {
                        case 0:
                            var font = "宋体";
                            break;
                        case 1:
                            var font = "楷体";
                            break;
                        case 2:
                            var font = "微软雅黑";
                            break;
                        case 3:
                            var font = "隶书";
                            break;
                        case 4:
                            var font = "黑体";
                            break;
                        default:
                            Toast('errs', 'font参数传入有误');
                            return
                    }

                    // 文本内容
                    var txt = data.text[is].text;
                    objCanvas.strokeStyle = data.text[is].color;
                    objCanvas.fillStyle = data.text[is].color;

                    // 设置样式
                    var style = data.text[is].style;
                    var styleVal = {
                        "style": "normal",
                        "variant": "normal",
                        "weight": "normal",
                        "size": data.text[is].size*4.2,
                        "family": font
                    };


                    if(style != 0){
                        if(style & 1){
                            styleVal.weight = "bold";
                        }
                        if(style & 2){
                            styleVal.style = "italic";
                        }
                        if(style & 4){
                            setFont()
                            objCanvas.moveTo(data.text[is].startX, data.text[is].startY + styleVal.size+4);
                            objCanvas.lineTo(data.text[is].startX + objCanvas.measureText(txt).width, data.text[is].startY + styleVal.size+4);
                            objCanvas.stroke();
                        }
                        if(style & 8){
                            setFont()
                            //线条粗细
                            objCanvas.lineWidth = 2;
                            //线条起点
                            objCanvas.moveTo(data.text[is].startX, data.text[is].startY + (styleVal.size/2));
                            //线条终点
                            objCanvas.lineTo(data.text[is].startX + objCanvas.measureText(txt).width, data.text[is].startY + (styleVal.size/2));
                            objCanvas.stroke();
                        }
                        setFont()
                    }else{
                        setFont()
                    }

                    function setFont(){
                        objCanvas.font = styleVal.style + " " + styleVal.variant + " " + styleVal.weight + " " + styleVal.size + "px" + " " + styleVal.family;
                    }
                    
                    objCanvas.textBaseline = "top";
                    objCanvas.fillText(txt, data.text[is].startX, data.text[is].startY);
                })(i);
            }
        }

    }

    //生成图像
    function setImageSize(objCanvas,oImg,data,is){
        var width = data.image[is].width;
        var height = data.image[is].height;
        if( width == undefined && height == undefined ){
            //宽高都不存在
            objCanvas.drawImage(oImg, data.image[is].startX, data.image[is].startY);
        }else if( width != undefined && height != undefined ){
            //宽高都存在
            objCanvas.drawImage(oImg, data.image[is].startX, data.image[is].startY, width>=0?width:oImg.width, height>=0?height:oImg.height);
        }else if( width != undefined && height == undefined){
            //宽度存在
            objCanvas.drawImage(oImg, data.image[is].startX, data.image[is].startY, width>=0?width:oImg.width, oImg.height);
        }else if( width == undefined && height != undefined){
            //高度存在
            objCanvas.drawImage(oImg, data.image[is].startX, data.image[is].startY, oImg.width, height>=0?height:oImg.height);
        }
    }

    // 获取图片
    function getImageTyle(str){
        var newStr = '';
        var topStr = str.substr(0, 4);
        if( topStr == 'http' || topStr == 'file' || topStr == 'HTTP' || topStr == 'FILE' ){
            newStr = str;
        }else{
            newStr = "data:image/jpeg;base64," + str;
        }
        return newStr
    }
</script>
<script>
  require(['modules/machine_personal'], function (personal) {
        personal.laonianCard(cardDataJson);
    });
</script>
</body>
</html>